<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例练习</title>
	</head>
	<body>
		<!-- 1. 引入类库 vue/axios -->
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<div id="app">
			<!-- 新增的div -->
			<div align="center">
				<h3>用户新增</h3>
				姓名：<input type="text" v-model="addUser.name"/>
				年龄：<input type="text" v-model="addUser.age"/>
				性别：<input type="text" v-model="addUser.sex"/>
				<!-- 点击调用入库函数 -->
				<button @click="addUserBtn">新增</button>
			</div>
			<hr />
			<!-- 修改的div -->
			<div align="center">
				<h3>用户修改</h3>
				编号：<input type="text" disabled="true" v-model="updateUser.id"/>
				姓名：<input type="text" v-model="updateUser.name"/>
				<br />
				年龄：<input type="text" v-model="updateUser.age"/>
				性别：<input type="text" v-model="updateUser.sex"/>
				<br />
				<button @click="updateUserToDB()">修改</button>
			</div>
			
			<!-- 展现div -->
			<div>
				<table border="1px" width="80%" align="center">
					<tr align="center">
						<th colspan="5"><h3>用户列表</h3></th>
					</tr>
					<tr align="center">
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					<tr align="center" v-for="user in userList">
						<th v-text="user.id"></th>
						<th v-text="user.name"></th>
						<th v-text="user.age"></th>
						<th v-text="user.sex"></th>
						<th width="20%">
							<button @click="updateUserBtn(user)">修改</button>
							<!-- 调用方法 -->
							<button @click="deleteUser(user)">删除</button>
						</th>
					</tr>
				</table>
			</div>
		</div>
		
		<!-- 2. 创建vue对象 -->
		<script>
			// 2. 定义axios请求的前缀
			axios.defaults.baseURL = "http://localhost:8080/vue"
			const app = new Vue({
				el: "#app",
				data: {
					// 1. 定义用户数据
					userList: [],
					// 封装新增数据
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					// 待修改的用户数据
					updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
					
				},
				methods: {
					getUserList() {
						// 获取用户信息
						axios.get("/findAll")
							.then(promise => {
								// console.log(promise.data)
								this.userList = promise.data
								// console.log(this.userList)
							})
					},
					// 实现数据新增
					addUserBtn(){
						axios.post("/saveUser",this.addUser)
							.then(promise => {
								// 获取服务器返回值
								let msg = promise.data
								// 弹出框操作
								alert(msg)
								// 将列表数据刷新
								this.getUserList()
								// 新增之后，将数据清空
								this.addUser = {}
							})
					},
					// 实现用户删除
					deleteUser(user) {
						// delete请求和get请求一致，delete()中写url地址
						axios.delete("/deleteUserById?id=" + user.id)
							.then(promise => {
								// 弹出框操作
								alert(promise.data)
								// 将列表数据刷新
								this.getUserList()
							})
					},
					// 点击每天记录后的修改按钮，实现用户信息显示
					updateUserBtn(user) {
						// alert(user)
						this.updateUser = user
					},
					// 实现修改后的用户信息入库和显示到网页
					async updateUserToDB() {
						// 更新用put操作
						let {data:result} = await axios.put("/updateUserToDB", this.updateUser)
						this.getUserList()
						this.updateUser = {}
					}
				},
				// 利用生命周期函数触发ajax
				created() {
					// alert("生命周期函数"),
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
